<template>
  <basic-container>
    <!-- <dv-border-box-1>dv-border-box-1</dv-border-box-1> -->
    <!-- <dv-decoration-1 :color="['pink','yellow']" style="width:200px;height:50px;" /> -->
    <div>
      <el-form :inline="true" :model="formInline" class="control-form-inline">
        <el-form-item label="年度">
          <el-date-picker v-model="formInline.user" type="year" placeholder="选择年份" />
        </el-form-item>
        <el-form-item label="科室">
          <el-select v-model="formInline.region" placeholder="选择科室" clearable>
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
          <el-button>清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <avue-data-rotate :option="rotateOptions" />
    <div ref="recordsCharts" style="width:100%;height:300px;"></div>
    <div class="records-charts-flex">
      <div class="charts-flex-item">
        <div class="charts-flex-top">
          <div class="charts-title">问题病案科室TOP-10</div>
          <el-button type="primary" size="small" plain @click="handleCheckRecords">详情</el-button>
        </div>
        <div ref="departCharts" style="width: 100%;height: 210px;"></div>
      </div>
      <div class="charts-flex-item">
        <div class="charts-flex-top">
          <div class="charts-title">病案首页重点问题TOP-5</div>
          <el-button type="primary" size="small" plain @click="handleCheckIssues('key')">详情</el-button>
        </div>
        <div ref="importantCharts" style="width: 100%;height: 210px;"></div>
      </div>
      <div class="charts-flex-item">
        <div class="charts-flex-top">
          <div class="charts-title">病案首页一般问题TOP-5</div>
          <el-button type="primary" size="small" plain @click="handleCheckIssues('general')">详情</el-button>
        </div>
        <div ref="generalCharts" style="width: 100%;height: 210px;"></div>
      </div>



    </div>

  </basic-container>

  <!-- 详情弹出框 -->
  <el-dialog v-model="recordsTableShow" title="查看详情" width="58%">
    <el-form :inline="true" :model="formInline" class="control-form-inline">
      <el-form-item label="科室">
        <el-select v-model="recordsInline.departmentName" placeholder="选择科室">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="排序">
        <el-select v-model="formInline.sort" placeholder="">
          <el-option v-for="(i, index) in sortType" :key="index" :label="i.label" :value="i.label" />
        </el-select>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" stripe highlight-current-row style="width: 100%">
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column property="billYear" label="年份" />
      <el-table-column property="departmentName" label="科室" />
      <el-table-column property="problemMedicalCount" label="总比例" />
      <el-table-column property="groupMedicalCount" label="入组病例" />
      <el-table-column property="groupMedicalPercent" label="入组率" />
      <el-table-column property="groupCount" label="DIP组数" />
      <el-table-column property="problemMedicalCount" label="问题病案数" />
      <el-table-column property="medicalQualifiedCount" label="合格病案数" />
      <el-table-column property="medicalQualifiedPercent" label="病案质控合格率" />
      <el-table-column property="medicalAverageScore" label="评价质量评分" />
    </el-table>
    <div class="pagination-container">
      <el-pagination v-model:current-page="currentPage1" :page-size="100" :hide-on-single-page="true" background
        layout="prev, pager, next" :total="1000" small />
    </div>


  </el-dialog>>
  <!-- 重要问题弹窗 -->
  <el-dialog v-model="keynoteIssuesShow" title="病案首页重点问题详情" width="58%">
    <el-table :data="issuesData" stripe highlight-current-row style="width: 100%">
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column property="importProblemName" label="重点问题" align="center" />
      <el-table-column property="importProblemCount" label="重点问题病案数" align="center" />
      <el-table-column property="importProblemCountRatio" label="重点问题病案占比(%)" align="center" />
    </el-table>
    <div class="pagination-container">
      <el-pagination v-model:current-page="currentPage1" :page-size="100" :hide-on-single-page="true" background
        layout="prev, pager, next" :total="1000" small />
    </div>



  </el-dialog>
  <!-- 一般问题弹窗 -->
  <el-dialog v-model="generalIssuesShow" title="病案首页一般问题详情" width="58%">
    <el-table :data="issuesData" stripe highlight-current-row style="width: 100%">
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column property="importProblemName" label="一般问题" align="center" />
      <el-table-column property="importProblemCount" label="一般问题病案数" align="center" />
      <el-table-column property="importProblemCountRatio" label="一般问题病案占比(%)" align="center" />
    </el-table>
    <div class="pagination-container">
      <el-pagination v-model:current-page="currentPage1" :page-size="100" :hide-on-single-page="true" background
        layout="prev, pager, next" :total="1000" small />
    </div>
  </el-dialog>

</template>


<script>
export default {
  data() {
    return {
      // 数据展示
      rotateOptions: {
        span: 5,
        data: [
          {
            click: () => {
              this.checkRecordsQuery()
            },
            count: '150',
            title: '档案总病例数',
            icon: 'el-icon-warning',
            color: '#409eff',

          }, {
            click: () => {
              this.recordsTableShow = true
            },
            count: '53%',
            title: '病案质控合格率',
            icon: 'el-icon-view',
            color: 'rgb(49, 180, 141)'
          }, {
            click: () => {
              this.recordsTableShow = true
            },
            count: '90.99',
            title: '平均质量评分',
            icon: 'el-icon-setting',
            color: '#f1829f'
          },
          {
            click: () => {
              this.recordsTableShow = true
            },
            count: '100',
            title: 'DIP组数',
            icon: 'el-icon-setting',
            color: '#f56c6c'
          },
          {
            click: () => {
              this.recordsTableShow = true
            },
            count: '44.44%',
            title: '档案入组率',
            icon: 'el-icon-setting',
            color: '#f39c12'
          }
        ]
      },
      // a:{
      //   {"billYear":"2024","billMonth":"","departmentId":"","sortField":"medicalQualifiedPercent","sortOrder":"desc","organType":8}
      // }
      recordsInline: {
        departmentName: '',
      },
      recordsTableShow: false,

      keynoteIssuesShow: false,
      generalIssuesShow: false,
      // 排序下拉框
      sortType: [
        {
          label: "DIP数组",
          value: 0
        },
        {
          label: "总病例",
          value: 1
        },
        {
          label: "入组率",
          value: 2
        },
        {
          label: "病案质控合格率",
          value: 3
        },
        {
          label: "平均质量评分",
          value: 4
        },
        {
          label: "问题病案数",
          value: 5
        }
      ],
      // table表格
      tableData: [
        {
          billYear: '2024',
          departmentName: '内科',
          problemMedicalCount: '150',
          groupMedicalCount: '100',
          groupMedicalPercent: '100%',
          groupCount: '10',
          medicalQualifiedCount: '100',
          medicalQualifiedPercent: '100%',
          medicalAverageScore: '90.99'
        },
        {
          billYear: '2024',
          departmentName: '外科',
          problemMedicalCount: '150',
          groupMedicalCount: '100',
          groupMedicalPercent: '100%',
          groupCount: '10',
          medicalQualifiedCount: '100',
          medicalQualifiedPercent: '100%',
          medicalAverageScore: '90.99'
        },
      ],
      // 重要问题弹窗
      issuesData: [
        {
          importProblemCount: 756,
          importProblemCountRatio: "20.42%",
          importProblemName: "手术及操作名称与手术费不符",
        },
        {
          importProblemCount: 756,
          importProblemCountRatio: "20.42%",
          importProblemName: "手术及操作名称与手术费不符",
        }
      ]

    }
  },
  methods: {
    handleCheckRecords() {
      this.recordsTableShow = true
    },
    handleCheckIssues(type) {
      type === 'key' ? this.keynoteIssuesShow = true : this.generalIssuesShow = true
    },
    checkRecordsQuery() {
      this.$router.push('/medicalRecords/query')
    }
  }
}
</script>
<script setup>
const formInline = reactive({
  user: '',
  region: '',
  date: '',
})
// 获取echart挂载的DOM节点
const recordsCharts = ref(null);
const departCharts = ref(null);
const importantCharts = ref(null);
const generalCharts = ref(null);

const { proxy } = getCurrentInstance();


const recordsOption = {
  // 自定义echarts图标相关配置
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  legend: {
    data: ['病案数', '质控合格率', '入组率']
  },
  grid: {

    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: new Array(12).fill(0).map((i, index) => `${index + 1}月`),
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '病案数',
    },
    {
      type: 'value',
      name: '率',
    }
  ],
  series: [
    {
      name: '病案数',
      type: 'bar',
      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985, 1200, 2230, 1900, 2100, 1000],
      color: '#aeeff0'
    },
    {
      name: '质控合格率',
      type: 'line',
      smooth: 0.9,
      symbol: 'none',
      color: '#f1829f',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' %';
        }
      },
      data: [2339, 1899, 2118, 1790, 3265, 4465, 3996, 2339, 1899, 2118, 1790, 3265],
    },
    {
      name: '入组率',
      smooth: 0.9,
      symbol: 'none',
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value + ' %';
        }
      },

      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985, 1200, 2230, 1900, 2100, 3500],
    }
  ]
};
// 问题病案科室-TOP10
const departOption = {
  title: {
    // text:'问题病案科室-TOP10',
    // left:'center',
    // textStyle:{
    //   color:'#f60',
    //   fontSize:16,
    //   fontWeight:'bold'
    // }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    bottom: '5%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Sun', 'Sun', 'Sun'],
    axisLabel: {
      interval: 0,
      rotate: 30
    },
  },
  yAxis: {
    type: 'value',
    name: '问题病案数',
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130, 90, 45, 60],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
}
// 病案首页重点问题TOP-5
const importantOption = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '2%',
    // right: '2%',
    bottom: '10%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    // boundaryGap: [0, 0.1]
  },
  yAxis: {
    type: 'category',
    data: ['病案号', '科室档案', '质控问题', '审核问题', '其他问题'],

  },
  series: [
    {
      name: '2011',
      type: 'bar',
      data: [100, 120, 300, 200, 180],
      color: '#fa4c4c'
    },
  ]
}
// const generalOption = {
//   tooltip: {
//     trigger: 'axis',
//     axisPointer: {
//       type: 'shadow'
//     }
//   },
//   grid: {
//     left: '2%',
//     // right: '2%',
//     bottom: '10%',
//     containLabel: true
//   },
//   xAxis: {
//     type: 'value',
//     boundaryGap: [0, 0.1]
//   },
//   yAxis: {
//     type: 'category',
//     data: ['Brazil', 'Indonesia', 'USA', 'India', 'China']
//   },
//   series: [
//     {
//       name: '2011',
//       type: 'bar',
//       data: [18203, 23489, 29034, 104970, 131744],
//       color: '#00d3b0'
//     },
//   ]
// }
const generalOption = {
  title: {
    // text: '重点问题占比%',
    subtext: '重点问题占比%',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: '病案科室问题' },
        { value: 735, name: '审核问题' },
        { value: 580, name: '质控问题' },
        // { value: 484, name: 'Union Ads' },
        // { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};




onMounted(() => {

  let myChart = proxy.$echarts.init(recordsCharts.value);
  let myChart1 = proxy.$echarts.init(departCharts.value);
  let myChart2 = proxy.$echarts.init(importantCharts.value);
  let myChart3 = proxy.$echarts.init(generalCharts.value);


  myChart.setOption(recordsOption);
  myChart1.setOption(departOption);
  myChart2.setOption(importantOption);
  myChart3.setOption(generalOption);


})

// 根据页面大小自动响应图表大小
window.addEventListener("resize", function () {
  myChart.resize();
});
</script>

<style lang="scss" scoped>
// .records-charts {
//   width: 100%;
//   padding-top: 12px;
// }

.a {
  color: #fa4c4c;
  color: #4c39f8
}

:deep(.el-col-md-5) {
  flex: 1 !important;
}

.records-charts-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.charts-flex-item {
  width: 32%;
  height: 232px;
  // padding-top: 20px;
  border: 6px solid #f1f1f1;
  border-radius: 30px;
}

.charts-flex-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px 0;
}

.charts-title {
  font-weight: bold;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
